<template>
    <div class="photoinfo-container">
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time|dateFormat("YYYY-MM-DD HH:mm")}}</span>
            <span>点击：{{photoinfo.click}}次</span>
        </p>
        <hr>
        <!--缩略图区-->
        <div class="my-thumbs">
            <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        </div>

        <!--图片内容区-->
        <div class="content" v-html="photoinfo.content"></div>

        <!--放置一个现成的评论子组件-->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import comment from '../subcomponents/comment.vue'

  export default {
    data() {
      return {
        //从路由中获取图片id
        id: this.$route.params.id,
        //图片详细数据
        photoinfo: {},
        slide1: []
      }
    },
    created() {
      this.getPhotoInfo()
      this.getThumbs()
    },
    methods: {
      getPhotoInfo() {
        //获取图片详情
        this.$http.get(this.COMMON.apiList["图片详情"] + this.id).then(response => {
          if (response.body.status === 0) {
            this.photoinfo = response.body.message[0]
          } else {
            Toast("加载图片详情失败")
          }
        })
      },
      getThumbs() {
        //获取缩略图
        this.$http.get(this.COMMON.apiList["缩略图"] + this.id).then(response => {
          if (response.body.status === 0) {
            // 循环遍历每个图片数据，补全图的宽高标题提示
            response.body.message.forEach((item, index) => {
              item.msrc = item.img
              item.w = 600
              item.h = 400
              item.alt = 'picture' + index
              item.title = 'Image Caption ' + index
              delete item['img']
            })
            //完整的数据保存到list中
            this.slide1 = response.body.message
          } else {
            Toast("加载图片详情失败")
          }
        })
      },
      handleClose() {
        console.log('close event')
      }
    },
    components: {
      //注册组件
      'cmt-box': comment
    }
  }
</script>

<style lang="scss" scoped>
    .photoinfo-container {
        padding: 3px;
        h3 {
            color: #26A2FF;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }
        .subtitle {
            display: flex;
            justify-content: space-between;
        }
        .content {
            font-size: 13px;
            line-height: 30px;
        }
        .my-thumbs {
            img {
                margin: 10px;
                box-shadow: 0 0 8px #999999;
            }
        }
    }
</style>